/* 定义布局为盒模型*/
.flex {
  display:-webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
}
/* 垂直布局*/
.flex-v {
  -webkit-box-orient:vertical;
  -webkit-box-direction:normal;
  -moz-box-orient:vertical;
  -moz-box-direction:normal;
  flex-direction:column;
  -webkit-flex-direction:column;
}
/* 垂直布局反转*/
.flex-v-reverse {
  -webkit-box-orient:vertical;
  -webkit-box-direction:reverse;
  -moz-box-orient:vertical;
  -moz-box-direction:reverse;
  flex-direction:column-reverse;
  -webkit-flex-direction:column-reverse;
}
/* 盒模型水平布局*/
.flex-h {
  -webkit-box-orient:horizontal;
  -webkit-box-direction:normal;
  -moz-box-orient:horizontal;
  -moz-box-direction:normal;
  flex-direction:row;
  -webkit-flex-direction:row;
}
/* 水平反转*/
.flex-h-reverse {
  -webkit-box-orient:horizontal;
  -webkit-box-direction:reverse;
  -moz-box-orient:horizontal;
  -moz-box-direction:reverse;
  flex-direction:row-reverse;
  -webkit-flex-direction:row-reverse;
}
/* flex-wrap换行-IE11以下不支持，firefox25以后支持*/
.flex-wrap {
  -webkit-flex-wrap:wrap;
  -webkit-box-lines:multiple;
  -moz-flex-wrap:wrap;
  flex-wrap:wrap;
}
/* 水平排列并换行*/
.flex-flow {
  -webkit-flex-flow:row wrap;
  -webkit-box-orient:horizontal;
  -webkit-box-lines:multiple;
  -moz-flex-flow:row wrap;
  box-orient:horizontal;
  box-lines:multiple;
  flex-flow:row wrap;
}
/* 子元素占据剩余的空间 IE11以下不支持*/
.flex-1 {
  box-flex: 1;
  -webkit-box-flex: 1;
  -moz-box-flex: 1;
  flex: 1;
  -webkit-flex: 1;
}
/* 子元素垂直居中 IE11以下不支持*/
.flex-align-center {
  align-items:center;
  -webkit-align-items:center;
  box-align:center;
  -moz-box-align:center;
  -webkit-box-align:center;
}
/* 子元素水平居中*/
.flex-pack-center {
  -webkit-justify-content:center;
  justify-content:center;
  -moz-box-pack:center;
  -webkit--moz-box-pack:center;
  box-pack:center;
}
/* 子元素两端对齐*/
.flex-justify-space-between {
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
}
/* 子元素中间对齐*/
.flex-justify-center {
  -webkit-justify-content:center;
  justify-content:center;
  -moz-box-pack:center;
  -webkit--moz-box-pack:center;
  box-pack:center;
}
/* 子元素 around*/
.flex-justify-space-around {
  -webkit-box-pack: justify;
  -webkit-justify-content: space-around;
  -ms-flex-pack: justify;
  justify-content: space-around;
}
/* 元素出现顺序*/
.flex-order{
  box-order:1;
  -webkit-box-order:1;
  -moz-box-order:1;
  order:1;
  -webkit-order:1;
}
